<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>ajax-klxin</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }

      li {
        list-style: none;
      }

      .wrap {
        width: 846px;
        margin-right: auto;
        margin-left: auto;
      }

      .pagenation {
        overflow: hidden;
      }

      .pagenation li {
        float: left;
        padding: 2px 10px;
        margin: 10px;
        border: 1px solid #d8d8d8;
        cursor: pointer;
        border-radius: 3px;
        transition: 0.6s;
      }

      .pagenation li:hover,
      li.active {
        border-color: #00b90d;
        color: #00b90d;
      }

      .clearfix:after {
        content: '.';
        font-size: 0;
        overflow: hidden;
        display: block;
        clear: both;
      }

      .list li {
        width: 240px;
        border: 1px solid transparent;
        padding: 10px;
        float: left;
        margin: 10px;
        box-shadow: 0 0 10px #e2e2e2;
        transition: 0.6s;
      }

      .list li:hover {
        box-shadow: 0 0 50px #e2e2e2;
      }

      .list li a {
        font-size: 0;
        display: block;
        height: 160px;
        overflow: hidden;
      }

      .list li a img {
        width: 100%;
        vertical-align: middle;
      }

      .list li p {
        color: #929292;
        line-height: 24px;
      }

      .list li p:nth-of-type(1) {
        margin-top: 10px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .list li p:nth-of-type(2) {
        font-size: 14px;
        height: 48px;
        margin-top: 10px;
        -webkit-line-clamp: 2;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        overflow: hidden;
        word-break: break-all;
      }

      .mask {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(255, 255, 255, 0.3);
        display: none;
      }
      .loading {
        margin: 150px auto;
        border-radius: 50%;
        width: 50px;
        height: 50px;
        border: 10px solid #fff;
        border-top-color: #000;
        animation: loading 1.1s infinite linear;
      }

      @keyframes loading {
        from {
          transform: rotate(0deg);
        }
        to {
          transform: rotate(360deg);
        }
      }
    </style>
  </head>

  <body>
    <div class="wrap">
      <ol class="pagenation">
        <li data-page="1">1</li>
        <li data-page="2">2</li>
        <li data-page="3">3</li>
        <li data-page="4">4</li>
      </ol>
      <ul class="list clearfix">
        <li>
          <a href="photo.sina.cn/album_1_86058_468579.htm?cre=picw&amp;mod=picg&amp;loc=31&amp;r=0&amp;rfunc=100&amp;tj=none&amp;vt=4&amp;from=recommend">
            <img src="https://n.sinaimg.cn/news/1_img/upload/953904eb/84/w1000h684/20200715/195b-iwhseiu5149132.jpg" alt="2020年7月14日，江西鄱阳。为。" />
          </a>
          <p>强降雨天气即将到来 鄱阳抗洪武警烈日下加固大堤</p>
          <p>2020年7月14日，江西鄱阳。为“迎接”即将到来的强降雨天气，武警江西总队机动支队在烈日下的昌江圩朱家桥段加固大堤。崔萌/摄</p>
        </li>
        <li>
          <a href="photo.sina.cn/album_1_86058_468579.htm?cre=picw&amp;mod=picg&amp;loc=31&amp;r=0&amp;rfunc=100&amp;tj=none&amp;vt=4&amp;from=recommend">
            <img src="https://n.sinaimg.cn/news/1_img/upload/953904eb/84/w1000h684/20200715/195b-iwhseiu5149132.jpg" alt="2020年7月14日，江西鄱阳。为。" />
          </a>
          <p>强降雨天气即将到来 鄱阳抗洪武警烈日下加固大堤</p>
          <p>2020年7月14日，江西鄱阳。为“迎接”即将到来的强降雨天气，武警江西总队机动支队在烈日下的昌江圩朱家桥段加固大堤。崔萌/摄</p>
        </li>
        <li>
          <a href="photo.sina.cn/album_1_86058_468579.htm?cre=picw&amp;mod=picg&amp;loc=31&amp;r=0&amp;rfunc=100&amp;tj=none&amp;vt=4&amp;from=recommend">
            <img src="https://n.sinaimg.cn/news/1_img/upload/953904eb/84/w1000h684/20200715/195b-iwhseiu5149132.jpg" alt="2020年7月14日，江西鄱阳。为。" />
          </a>
          <p>强降雨天气即将到来 鄱阳抗洪武警烈日下加固大堤</p>
          <p>2020年7月14日，江西鄱阳。为“迎接”即将到来的强降雨天气，武警江西总队机动支队在烈日下的昌江圩朱家桥段加固大堤。崔萌/摄</p>
        </li>
      </ul>
    </div>
    <div class="mask">
      <div class="loading"></div>
    </div>
  </body>
</html>
